<template>
  <div class="b">
    <div class="a" id="myBar"></div>
  </div>
</template>

<script>
export default {
    data () {
        return {
        }
    },
    mounted(){
        this.drawBar();
    },
    methods: {
      drawBar(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('myBar'))
          // 绘制图表
          myChart.setOption({
              tooltip: {},
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
              legend: {
                  data: ['总销售额', '总销售量', '利润', '成本']
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: [
                  {
                      type: 'category',
                      data: ['第一季度', '第二季度', '第三季度', '第四季度']
                  }
              ],
              yAxis: [
                  {
                      type: 'value'
                  }
              ],
              series: [
                {
                    name: '总销售额',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '总销售量',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '利润',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '成本',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                }
              ]
          });
      }
    }
}
</script>
};

<style lang="less" scoped>
.a {
  height: 100%;
  width: 100%;
}
.b {
  height: 100%;
  width: 100%;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #FFFFFF;
}
.bg-purple {
  background: #FFFFFF;
}
.bg-purple-light {
  background: #FFFFFF;
}
.grid-content {
  border-radius: 4px;
  min-height: 80px;
}
.row-bg {
  padding: 10px 0;
  background: #FFFFFF;
}
.el-icon {
  height: 80px;
}
.pic {
  background:#ffffff;
  height: 300px;
}
</style>
